<!--
toRaw()：用于获取原始对象（非响应式版本）
  功能：
    1、从一个响应式对象中提取原始数据。
    2、返回原始的、未经代理的对象。
    3、常用于调试、比较等场景
  应用场景：
    1、避免嵌套响应式时的循环引用问题。
    2、对响应式对象进行严格相等性比较

markRaw()：用于标记一个对象为非响应式对象。
  功能：
    1、被 markRaw() 包裹的对象不会被 Vue 转化为响应式。
    2、适合存储不需要响应式的复杂数据（如第三方库数据、DOM 节点）。
  应用场景：
    1、大型对象或结构（如图表库数据）不需要响应式。
    2、避免对第三方对象或库的意外干扰。
总结：
  1、toRaw()：从响应式对象获取原始数据。
  2、markRaw()：防止对象被 Vue 转化为响应式。
-->
<template>
  <div id="wrap">
    <h1>toRaw() & markRaw()</h1>
    <p class="group">
      <button type="button" @click="editmarkRaw">修改shallowRef</button>
      <!-- <button type="button" @click="triggerRefHandler">强制刷新标记</button> -->
    </p>
    <hr />

    <p class="group">{{ datas.count }}</p>
    <hr />

    <ul class="group">
      <li v-for="item in datas.strArr" :key="item">{{ item }}</li>
    </ul>
    <hr />

    <ul class="group">
      <li v-for="(item, name) in datas.user" :key="name">{{ item }}</li>
    </ul>
    <hr />

    <ul class="group">
      <li v-for="(item, name) in datas.markFoo" :key="name">{{ item }}</li>
    </ul>
    <hr />
  </div>
</template>

<script lang="ts">
export default {
  name: 'dayStuDemo24',
};
</script>

<script lang="ts" setup>
import {isReactive, markRaw, reactive, toRaw } from 'vue';
// toRaw()
const foo = reactive({
  name: '小明',
  age: 18,
});
console.log(foo);
const foos = toRaw(foo);
console.log(foos); //不具备响应式
//markRaw()
const foo1 = markRaw([123, 234, 345, 456, 567, 678]); //标签这个数组不要转为响应式
console.log(isReactive(reactive(foo1))); //false
const dataObj3 = {
  count: 0,
  strArr: ['php', '刘强东', '马云', '马化腾', '任正非'],
  user: {
    name: '刘强东',
    sex: '男',
    age: 42,
    aihao: {},
  },
};

const datas = reactive({
  ...dataObj3, //可以转为响应式
  markFoo: foo1, //不可以转为响应式
});
const editmarkRaw = () => {
  // datas.count++
  // datas.strArr.push('你干嘛~~~')
  // datas.user.name = '阿杰'
  datas.markFoo.push(99999);
};
// const triggerRefHandler = () => {
//   triggerRef(foo1);
// };
</script>

<style lang="scss" scoped>
.group {
  padding: 20px;
  border: 2px solid #abcdef;
  margin: 10px 0;
}
</style>
